<template>
  <view>
    <view class="navbar">
      <view class="fixed-content">
        <!-- 状态栏高度 -->
        <view
          :style="{ height: statusBarHeight + 'px' }"
          class="statusBar"
        ></view>
      </view>
      <!-- 占位高度，状态栏高度 -->
      <!-- <view
        :style="{ height: statusBarHeight + 'px' }"
      ></view> -->
    </view>
    <u-swiper :list="list1"></u-swiper>

    <view class="content" :style="{ height: sizeInfo.height + 'px' }">
      <view class="topSty">
        <view class="top search">
          <u-search
            placeholder="请输入商品名称"
            shape="round"
            v-model="keyword"
            @custom="searchClick()"
            @search="searchClick()"
          ></u-search>
        </view>
      </view>
      <view v-if="listData.length > 0" class="flex-wrp">
        <view v-for="(item, index) in listData" :key="index">
          <view class="list">
            <view class="l_left">
              <image
                class="logo"
                src="/static/image/goodsLogo.jpg"
                mode="widthFix"
              ></image>
            </view>
            <view class="l_middle" mode="heightFix">
              <text class="goods_name">{{ item.goodsName }}</text>
              <view class="vip-price">
                <text class="unit">¥</text>
                <text class="price">{{ item.price }} </text>
                <text class="isVip">会员价 </text>
              </view>
            </view>
            <view class="r_item">
              <u-button
                type="error"
                :plain="true"
                size="mini"
                @click="buyClick(item)"
                >去购买</u-button
              >
            </view>
            <view class="line"></view>
          </view>
        </view>
        <u-loadmore
          v-if="listData.length > 3"
          style="loadmore"
          :status="status"
          :icon-type="iconType"
          :load-text="loadText"
        />
      </view>
      <view v-else>
        <view class="tkxxBox">
          <image :src="msg" class="tkxxPic" />
        </view>
        <view class="contentTxt">未发现有数据~</view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
export default {
  data() {
    return {
      list1: [
        // "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        // "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        // "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "./static/image/banner1.jpeg",
        "./static/image/banner2.jpeg",
      ],
      student: uni.getStorageSync("student"),
      sizeInfo: {
        height: 0, //滚动区域高度
      },
      msg: "/static/image/msg.png",
      // page: 1, //0开始
      // total: 0, //总页数
      keyword: "",
      listData: [],
      testData: [
        {
          goodsName: "(JD)京东E卡(50元)",
          price: "50",
        },
        {
          goodsName: "(JD)京东E卡(40元)",
          price: "40",
        },
        {
          goodsName: "(JD)京东E卡(30元)",
          price: "30",
        },
        {
          goodsName: "(JD)京东E卡(20元)",
          price: "20",
        },
        {
          goodsName: "(JD)京东E卡(10元)",
          price: "10",
        },
        {
          goodsName: "(JD)京东E卡(1元)",
          price: "1",
        },
      ],
      /* 上拉刷新,下拉加载 */
      // loadingType: 0,
      status: "nomore",
      iconType: "circle",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      statusBarHeight:0
    };
  },
  created(){
    this.listData = this.testData;
    uni.getSystemInfo({
      success: function (info) {
        this.statusBarHeight = info.statusBarHeight
      }
    });
  },
  onShow() {
    let phone = uni.getStorageSync("phone");
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
    } else {
      uni.showToast({
        title: "未获取到用户信息！",
        icon: "none",
      });
      this.$u.route({
        url: "pages/login/index",
      });
    }
  },
  mounted() {},
  methods: {
    searchClick() {
      if (this.keyword) {
        let arr = [];
        this.testData.map((item) => {
          if (item.goodsName.includes(this.keyword)) {
            arr.push(item);
          }
        });
        this.listData = arr;
      } else {
        this.listData = this.testData;
      }
    },
    buyClick() {
      // uni.showToast({
      //   title: "商品库存不足",
      //   icon: "none",
      //   mask: true,
      // });
      this.$u.route({
        url: "pages/goods/goodsDetail",
      });
    },
    
  },
};
</script>


<style scoped lang="scss" >
.navbar {
  .fixed-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 24rpx;
    z-index: 1996;
  }
}
.content {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
}
.topSty {
  margin-top: 10rpx;
  padding: 10rpx;
}
.flex-wrp {
  /* overflow-y: scroll; */
  padding: 10px 20px 60px 10px;
}
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 10px 0;
  /* -moz-box-shadow: -1px 1px 11px rgba(32, 32, 32, 0.07);
  -webkit-box-shadow: -1px 1px 11px rgba(32, 32, 32, 0.07);
  box-shadow: -1px 1px 11px rgba(32, 32, 32, 0.07); */
  position: relative;
  border-bottom: 4rpx solid #efefef;
}
.l_left {
  height: 180rpx;
  width: 200rpx;
  /* max-width: 250rpx; */
  text-align: center;
}
.logo {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
}
.l_middle {
  height: 180rpx;
  /* max-width: 250rpx; */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.goods_name {
  margin-top: 12rpx;
}
.vip-price {
  margin-top: 50rpx;
  color: #f56c6c;
}
.isVip {
  margin-left: 10rpx;
  color: #fff;
  background: #f56c6c;
  border-radius: 4rpx;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
}
.r_item {
  width: 100rpx;
  /* align-items: center; */
  /* text-align: center; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tkxxBox {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50%;
  margin-bottom: 28rpx;
}
.tkxxPic {
  width: 54%;
  height: 280rpx;
  display: block;
}
.contentTxt {
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
</style>